<template>
  <div>
    <van-nav-bar
        title="订单明细"
        left-arrow
        @click-left="onClickLeft"
    />
    <p style="margin-left: 20px;text-align: left">订单编号:{{ this.order.orderInformation.orderId }}</p>
    <p style="margin-left: 20px;text-align: left">到达时间:{{ this.order.orderTime.destinationTime}}</p>
    <p style="margin-left: 20px;text-align: left">出发点:{{ this.order.orderInformation.startingPointAddress }}</p>
    <p style="margin-left: 20px;text-align: left">目的地:{{ this.order.orderInformation.destinationAddress }}</p>
    <div style="text-align: left;margin-top: 20px;">
      <img :src=this.driver.driverImgurl alt="" style="width: 100px;height: 100px;border-radius: 100px; margin-left: 20px;" >
      <div style="float: right;margin-right: 100px;margin-top: 20px;">
        <span style="font-weight: bolder">{{ this.driver.driverName }}</span>
        <br/>
        <span>
           <van-rate v-model="this.driver.driverPoint" readonly/><span style="color: red">{{ this.driver.driverPoint+"分" }}</span>
        </span>
      </div>
    </div>
    <div style="width: 100%;height: 100px;text-align: center;color: red">
      <span style="font-size: 60px;line-height: 100px;">${{this.order.orderCost.orderMoney}}</span>
      <a @click="details()"><span style="color: #409EFF;margin-left: 10px;">明细></span></a>
    </div>
    <div style="margin-left: 20px;margin-top: 10px;">
      <van-radio-group v-model="feedback.radio">
        <van-radio  name="拿走车主物品" class="radio">拿走车主物品</van-radio>
        <van-radio  name="污损车辆" class="radio" >污损车辆</van-radio>
        <van-radio  name="酒后滋事" class="radio" >酒后滋事</van-radio>
        <van-radio name="不尊重车主 言语伤人" class="radio"  >不尊重车主 言语伤人</van-radio>
        <van-radio  name="中途变更路线或目的地" class="radio" >中途变更路线或目的地</van-radio>
        <van-radio  name="携带大行李未提前沟通" class="radio" >携带大行李未提前沟通</van-radio>
        <van-radio  name="要求车主违章行驶" class="radio" >要求车主违章行驶</van-radio>
        <van-radio  name="其他" class="radio" >其他</van-radio>
      </van-radio-group>
    </div>
    <div style="margin-top: 10px;">
      <van-field
          v-model="feedback.message"
          rows="5"
          autosize
          type="textarea"
          placeholder="请在此补充说明，以便客服帮您解决问题，谢谢"
          style="border: 1px solid black; height: 120px;width: 90%;margin-left: 5%"
      />
    </div>
    <van-button type="info" style="margin-top: 20px; width: 60%;height: 50px;border-radius: 40px;" @click="addFeedBack()">提交反馈</van-button>
  </div>
</template>

<script>

import {addFeedBack,findFeedBack} from "@/components/api/historyorder/historyorder.js";

export default {

  data() {
    return {
      val:5,

      feedback:{
        id:null,
        orderId:"",
        message:"",
        driverId:null,
        userId:null,
        radio: "",
      },
      driver:{

      },
      order:{

      },
    };
  },
  created() {
    this.getDriver();
    this.getorder();
    this.findFeedBack();
  },
  methods: {
    findFeedBack(){
      findFeedBack(this.order.orderInformation.orderId).then(res=>{
        if(res.data!=null){
          this.feedback=res.data;
        }
      })
    },
    // 提交反馈
    addFeedBack(){
      this.feedback.orderId=this.order.orderInformation.orderId;
      this.feedback.driverId=this.driver.id;
      this.feedback.userId=this.order.orderInformation.userId;
      addFeedBack(this.feedback).then(res=>{
        if(res.code==200){
          this.$toast.success("反馈成功");
          this.$router.push({
            path: '/history',
          });
        }
      })
    },
    // 获取司机信息
    getDriver(){
      this.driver=JSON.parse(localStorage.getItem("personalUser"));
      if(this.driver==null){
        this.$router.push({
          path: '/'
        })
      }
    },
    // 跳转金额详情页面
    details(){
      this.$router.push({
        path: '/moneyDetails',
        query: {order: this.order}
      })
    },
    // 获取订单信息
    getorder(){
      this.order=this.$route.query.order;
    },
    //返回
    onClickLeft(){
      this.$router.push({
        path: '/history',
      });
    }
  },
};
</script>
<style>
.radio {
  margin-top: 15px;
}

</style>
